<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: yanchao
  Date: 2021/11/7
  Time: 下午8:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>基础信息维护 - 助学贷款系统</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
    <link rel="stylesheet" href="./static/admin/css/style.css">
    <script src="./static/layui/layui.js"></script>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/admin/js/userConfig.js"></script>
</head>
<body class="p20">



<fieldset class="layui-elem-field layui-field-title">
    <legend>上传头像</legend>
</fieldset>

<form class="layui-form " method="post" action="/uploadImage.do?id=${sessionScope.user.id}" enctype="multipart/form-data" >
    <div style="position: relative;margin: auto;">
        <c:if test="${not empty sessionScope.user.pic}"><img width="215" height="255" id="imageshow" src="./static/images/${sessionScope.user.pic}" style="margin: 0px 0px 0px 100px;" /></c:if>
        <c:if test="${empty sessionScope.user.pic}"><img width="215" height="255" id="imageshow" src="./static/images/default.jpg" style="margin: 0px 0px 0px 100px;" /></c:if>

                <input type="file" id="file" name="file" onchange="previewImage(this)"
               style="height:255px;width:215px;opacity:0;cursor:pointer;position: absolute;
top: 0;left: 0;z-index: 9;" /></div>

    <div class="layui-form-item">
        <div class="layui-input-block" style="margin: 20px 0px 0px 170px;">
            <button class="layui-btn" type="submit">提交</button>
        </div>
    </div>
</form>



<script src="./static/admin/js/script.js"></script>
<script type="text/javascript" language="javascript">

    //图片上传预览
    function previewImage(file) {
        var img = document.getElementById('imageshow');
        var reader = new FileReader();
        reader.onload = function (evt) { img.src = evt.target.result; }
        reader.readAsDataURL(file.files[0]);
    }
</script>
</body>
</html>
